<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TTS System Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .provider-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .provider-card {
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
        }
        .provider-card h3 {
            margin-top: 0;
            color: #333;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background: #0056b3;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin-top: 10px;
        }
        .status.success {
            background: #d4edda;
            color: #155724;
        }
        .status.error {
            background: #f8d7da;
            color: #721c24;
        }
        .status.info {
            background: #d1ecf1;
            color: #0c5460;
        }
        audio {
            width: 100%;
            margin-top: 10px;
        }
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
    </style>
  <script defer src="/webui/js/test-tts-page.js"></script>
</head>
<body>
    <h1>🎙️ TTS System Test Interface</h1>

    <div class="test-section">
        <h2>Test Configuration</h2>
        <div>
            <label>API Base URL:</label>
            <input type="text" id="api-url" value="http://localhost:8000/api/v1" style="width: 300px;">
            <label style="margin-left: 20px;">API Key (if required):</label>
            <input type="password" id="api-key" placeholder="Optional" style="width: 200px;">
        </div>
    </div>

    <div class="test-section">
        <h2>Provider Status Check</h2>
        <button id="check-health-btn">Check All Providers</button>
        <div id="health-status" class="status info" style="display:none;"></div>
    </div>

    <div class="test-section">
        <h2>Text Input</h2>
        <textarea id="test-text" rows="4">
This is a test of the TTS system. Each provider has unique capabilities and voice characteristics that we can explore.
        </textarea>
    </div>

    <div class="test-section">
        <h2>Test Each Provider</h2>
        <div class="provider-grid">
            <!-- VibeVoice -->
            <div class="provider-card">
                <h3>🌊 VibeVoice</h3>
                <p>Features: Voice cloning, multi-speaker, long-form</p>
                <select id="vibevoice-voice">
                    <option value="aurora">Aurora</option>
                    <option value="phoenix">Phoenix</option>
                    <option value="sage">Sage</option>
                    <option value="nova">Nova</option>
                </select>
                <button class="provider-test-btn" data-provider="vibevoice">Test VibeVoice</button>
                <div id="vibevoice-status"></div>
                <audio id="vibevoice-audio" controls style="display:none;"></audio>
            </div>

            <!-- NeuTTS Air -->
            <div class="provider-card">
                <h3>☁️ NeuTTS Air</h3>
                <p>Features: Instant voice cloning (ref audio + text). Streaming with GGUF.</p>
                <label for="neutts-model">Model:</label>
                <select id="neutts-model">
                    <option value="neutts-air">neutts-air (HF, non-streaming)</option>
                    <option value="neutts-air-q8-gguf">neutts-air-q8-gguf (GGUF, streaming)</option>
                    <option value="neutts-air-q4-gguf">neutts-air-q4-gguf (GGUF, streaming)</option>
                </select>
                <div style="margin-top:8px">
                    <label for="neutts-format">Format:</label>
                    <select id="neutts-format">
                        <option value="wav">wav</option>
                        <option value="mp3" selected>mp3</option>
                        <option value="opus">opus</option>
                        <option value="flac">flac</option>
                        <option value="pcm">pcm</option>
                    </select>
                </div>
                <div style="margin-top:8px">
                    <label for="neutts-stream"><input type="checkbox" id="neutts-stream"> Stream (GGUF only)</label>
                </div>
                <div style="margin-top:8px">
                    <label>Reference Audio (3-15s):</label>
                    <input type="file" id="neutts-ref-audio" accept="audio/*">
                </div>
                <div style="margin-top:8px">
                    <label>Or Quick Record:</label>
                    <div>
                        <button id="neutts-rec-start">Record</button>
                        <button id="neutts-rec-stop" disabled>Stop</button>
                        <span id="neutts-rec-status" class="status info" title="If a recording is present, it overrides the selected file.">Idle (recording overrides file)</span>
                    </div>
                    <audio id="neutts-rec-playback" controls style="display:none; width:100%; margin-top:6px;"></audio>
                </div>
                <div style="margin-top:8px">
                    <label>Reference Text:</label>
                    <input type="text" id="neutts-ref-text" placeholder="Text spoken in the reference clip" style="width:100%">
                </div>
                <div style="margin-top:8px">
                    <button class="provider-test-btn" data-provider="neutts">Test NeuTTS</button>
                </div>
                <div id="neutts-status"></div>
                <audio id="neutts-audio" controls style="display:none;"></audio>
            </div>

            <!-- Kokoro -->
            <div class="provider-card">
                <h3>❤️ Kokoro</h3>
                <p>Features: Lightweight, voice mixing, fast</p>
                <select id="kokoro-voice">
                    <option value="af_bella">Bella (US Female)</option>
                    <option value="am_adam">Adam (US Male)</option>
                    <option value="bf_emma">Emma (UK Female)</option>
                    <option value="bm_george">George (UK Male)</option>
                </select>
                <button class="provider-test-btn" data-provider="kokoro">Test Kokoro</button>
                <div id="kokoro-status"></div>
                <audio id="kokoro-audio" controls style="display:none;"></audio>
            </div>

            <!-- Higgs -->
            <div class="provider-card">
                <h3>⚛️ Higgs</h3>
                <p>Features: 50+ languages, voice cloning, music</p>
                <select id="higgs-voice">
                    <option value="narrator">Narrator</option>
                    <option value="conversational">Conversational</option>
                    <option value="expressive">Expressive</option>
                    <option value="melodic">Melodic</option>
                </select>
                <button class="provider-test-btn" data-provider="higgs">Test Higgs</button>
                <div id="higgs-status"></div>
                <audio id="higgs-audio" controls style="display:none;"></audio>
            </div>

            <!-- Chatterbox -->
            <div class="provider-card">
                <h3>💬 Chatterbox</h3>
                <p>Features: Emotion control, voice cloning</p>
                <select id="chatterbox-voice">
                    <option value="default">Default</option>
                    <option value="energetic">Energetic</option>
                    <option value="calm">Calm</option>
                    <option value="professional">Professional</option>
                </select>
                <button class="provider-test-btn" data-provider="chatterbox">Test Chatterbox</button>
                <div id="chatterbox-status"></div>
                <audio id="chatterbox-audio" controls style="display:none;"></audio>
            </div>

            <!-- OpenAI -->
            <div class="provider-card">
                <h3>🧠 OpenAI</h3>
                <p>Features: High quality, consistent</p>
                <select id="openai-voice">
                    <option value="alloy">Alloy</option>
                    <option value="echo">Echo</option>
                    <option value="fable">Fable</option>
                    <option value="onyx">Onyx</option>
                    <option value="nova">Nova</option>
                    <option value="shimmer">Shimmer</option>
                </select>
                <button class="provider-test-btn" data-provider="openai">Test OpenAI</button>
                <div id="openai-status"></div>
                <audio id="openai-audio" controls style="display:none;"></audio>
            </div>

            <!-- ElevenLabs -->
            <div class="provider-card">
                <h3>🎙️ ElevenLabs</h3>
                <p>Features: Ultra-realistic, voice cloning</p>
                <select id="elevenlabs-voice">
                    <option value="rachel">Rachel</option>
                    <option value="domi">Domi</option>
                    <option value="bella">Bella</option>
                    <option value="antoni">Antoni</option>
                </select>
                <button class="provider-test-btn" data-provider="elevenlabs">Test ElevenLabs</button>
                <div id="elevenlabs-status"></div>
                <audio id="elevenlabs-audio" controls style="display:none;"></audio>
            </div>
        </div>
    </div>

    <div class="test-section">
        <h2>Batch Test</h2>
        <button id="test-all-btn">Test All Available Providers</button>
        <div id="batch-status"></div>
    </div>

    <!-- Logic moved to /webui/js/test-tts-page.js -->
</body>
</html>
